@use '../config';
@use './util';

/* - Box 盒模型 -
************************* */

// Padding
@if util.expect(config.$abbr-padding) {

  @each $outer-key, $outer-value in util.map-handler(config.$map-padding) {

    @each $inner-key, $inner-values in (
      '': (padding),
      't': (padding-top),
      'r': (padding-right),
      'b': (padding-bottom),
      'l': (padding-left),
      'x': (padding-right, padding-left),
      'y': (padding-top, padding-bottom)
    ) {

      @if $inner-key == '' {

        #{util.class-generator(config.$abbr-padding, $outer-key)}
        {

          @each $value in $inner-values {
            #{$value}: $outer-value;
          }

        }

      }
      @else {

        #{util.class-generator(#{config.$abbr-padding + $inner-key}, $outer-key)}
        {

          @each $value in $inner-values {
            #{$value}: $outer-value;
          }

        }

      }

    }

  }

}


// Margin
@if util.expect(config.$abbr-margin) {

  @each $outer-key, $outer-value in util.map-handler(config.$map-margin) {

    @each $inner-key, $inner-values in (
      '': (margin),
      't': (margin-top),
      'r': (margin-right),
      'b': (margin-bottom),
      'l': (margin-left),
      'x': (margin-right, margin-left),
      'y': (margin-top, margin-bottom)
    ) {

      @if $outer-key == '' {

        @if $outer-key != 'auto' {

          #{util.class-generator('-', config.$abbr-margin, $outer-key)}
          {

            @each $value in $inner-values {
              #{$value}: #{'-' + $outer-value};
            }

          }

        }

        #{util.class-generator(config.$abbr-margin, $outer-key)}
        {

          @each $value in $inner-values {
            #{$value}: $outer-value;
          }

        }

      }
      @else {

        @if $outer-key != 'auto' {

          #{util.class-generator('-', config.$abbr-margin + $inner-key, $outer-key)}
          {

            @each $value in $inner-values {
              #{$value}: #{'-' + $outer-value};
            }

          }

        }

        #{util.class-generator(#{config.$abbr-margin + $inner-key}, $outer-key)}
        {

          @each $value in $inner-values {
            #{$value}: $outer-value;
          }

        }
      }
    }

  }

}


// Width
@if util.expect(config.$abbr-width) {

  @each $key, $value in util.map-handler(config.$map-width) {

    #{util.class-generator(config.$abbr-width, $key)}
    {
      width: $value;
    }

  }

}

// Min Width
@if util.expect(config.$abbr-width) {

  @each $key, $value in util.map-handler(config.$map-minWidth) {

    #{util.class-generator(min, config.$abbr-width, $key)}
    {
      min-width: $value;
    }

  }

}

// Max Width
@if util.expect(config.$abbr-width) {

  @each $key, $value in util.map-handler(config.$map-maxWidth) {

    #{util.class-generator(max, config.$abbr-width, $key)}
    {
      max-width: $value;
    }

  }

}

// Height
@if util.expect(config.$abbr-height) {

  @each $key, $value in util.map-handler(config.$map-height) {

    #{util.class-generator(config.$abbr-height, $key)}
    {
      height: $value;
    }

  }

}

// Min Height
@if util.expect(config.$abbr-height) {

  @each $key, $value in util.map-handler(config.$map-minHeight) {

    #{util.class-generator(min, config.$abbr-height, $key)}
    {
      min-height: $value;
    }

  }

}

// Max Height
@if util.expect(config.$abbr-height) {

  @each $key, $value in util.map-handler(config.$map-maxHeight) {

    #{util.class-generator(max, config.$abbr-height, $key)}
    {
      max-height: $value;
    }

  }

}

// Border Radius
@if util.expect(config.$abbr-border-radius) {

  @each $outer-key, $outer-value in util.map-handler(config.$map-borderRadius) {

    @each $inner-key, $inner-values in (
      '': (),
      't': (top-left, top-right),
      'r': (top-right, bottom-right),
      'b': (bottom-right, bottom-left),
      'l': (top-left, bottom-left),
      'tl': (top-left),
      'tr': (top-right),
      'br': (bottom-right),
      'bl': (bottom-left)
    ) {

      @if $inner-key == '' {

        #{util.class-generator(config.$abbr-border-radius, $outer-key)}
        {
          border-radius: $outer-value;
        }

      }
      @else {

        #{util.class-generator(config.$abbr-border-radius, $inner-key, $outer-key)}
        {

          @each $value in $inner-values {
            #{'border-'}#{$value}#{'-radius'}: $outer-value;
          }

        }

      }

    }

  }

}


// Border Width
@if util.expect(config.$abbr-border-width) {

  @each $key, $value in util.map-handler(config.$map-borderWidth) {

    #{util.class-generator(config.$abbr-border-width, $key)}
    {
      border-width: $value;
    }

  }

}

// Border Color
@if util.expect(config.$abbr-border-color) {

  @each $outer-key, $outer-value in util.map-handler(config.$map-borderColor) {

    @if ($outer-key == inherit) or ($outer-key == 'current') or ($outer-key == transparent + '') {

      #{util.class-generator(config.$abbr-border-color, $outer-key)}
      {
        border-color: $outer-value;
      }

    }
    @else {

      #{util.class-generator(config.$abbr-border-color, $outer-key)}
      {
        --border-opacity: 1;
        border-color: rgba($color: $outer-value, $alpha: var(--border-opacity, 1));
      }

      @each $inner-key, $inner-value in util.map-handler(util.$map-color-brightness) {

        #{util.class-generator(config.$abbr-border-color, $outer-key, $inner-key)}
        {
          --border-opacity: 1;
          border-color: rgba($color: util.lighter-color($outer-value, $inner-value), $alpha: var(--border-opacity, 1));
        }

      }

    }

  }

}


// Border Color Opacity
@if util.expect(config.$abbr-border-opacity) {

  @each $key, $value in util.map-handler(config.$map-borderOpacity) {

    #{util.class-generator(config.$abbr-border-opacity, $key)}
    {
      --border-opacity: #{$value};
    }

  }

}

// Border Style
@if util.expect(config.$abbr-border-style) {

  @each $value in (
    solid,
    dashed,
    dotted,
    double,
    none
  ) {

    #{util.class-generator(config.$abbr-border-style, $value)}
    {
      border-style: #{$value};
    }

  }

}

// Divide Width
@if util.expect(config.$abbr-divide-width) {

  @each $outer-key, $outer-value in util.map-handler(config.$map-borderWidth) {

    @each $inner-value in (x, y) {

      #{util.class-generator(config.$abbr-divide-width, $inner-value, $outer-key)} :nth-child(even)
      {

          @if $inner-value == x {
            --divide-x-reverse: 0;
            border-right-width: calc(#{$outer-value} * var(--divide-x-reverse));
            border-left-width: calc(#{$outer-value} * calc(1 - var(--divide-x-reverse)));
            border-top-width: 0;
            border-bottom-width: 0;
          }
          @else {
            --divide-y-reverse: 0;
            border-top-width: calc(#{$outer-value} * calc(1 - var(--divide-y-reverse)));
            border-bottom-width: calc(#{$outer-value} * var(--divide-y-reverse));
            border-right-width: 0;
            border-left-width: 0;
          }

      }

    }

  }

  #{util.class-generator(config.$abbr-divide-width, x, reverse)} :nth-child(even)
  {
    --divide-x-reverse: 1;
  }

  #{util.class-generator(config.$abbr-divide-width, y, reverse)} :nth-child(even)
  {
    --divide-y-reverse: 1;
  }

}

// Divide Color
@if util.expect(config.$abbr-divide-color) {

  @each $outer-key, $outer-value in util.map-handler(config.$map-divideColor) {

    @if ($outer-key == inherit) or ($outer-key == 'current') or ($outer-key == transparent + '') {

      #{util.class-generator(config.$abbr-divide-color, $outer-key)} :nth-child(even)
      {
        border-color: $outer-value;
      }

    }
    @else {

      #{util.class-generator(config.$abbr-divide-color, $outer-key)} :nth-child(even)
      {
        --divide-opacity: 1;
        border-color: rgba($color: $outer-value, $alpha: var(--divide-opacity, 1));
      }

      @each $inner-key, $inner-value in util.map-handler(util.$map-color-brightness) {

        #{util.class-generator(config.$abbr-divide-color, $outer-key, $inner-key)} :nth-child(even)
        {
          --divide-opacity: 1;
          border-color: rgba($color: util.lighter-color($outer-value, $inner-value), $alpha: var(--divide-opacity, 1));
        }

      }

    }

  }

}


// Divide Color Opacity
@if util.expect(config.$abbr-divide-opacity) {

  @each $key, $value in util.map-handler(config.$map-divideOpacity) {

    #{util.class-generator(config.$abbr-divide-opacity, $key)}
    {
      --divide-opacity: #{$value};
    }

  }

}

// Divide Style
@if util.expect(config.$abbr-divide-style) {

  @each $value in (
    solid,
    dashed,
    dotted,
    double,
    none
  ) {

    #{util.class-generator(config.$abbr-divide-style, $value)} :nth-child(even)
    {
      border-style: $value;
    }

  }

}